{% extends "base.html" %}

{% block title %}数据统计 - 专注时钟{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
{% endblock %}

{% block content %}
<div class="statistics-container">
    <div class="statistics-header">
        <h2>数据统计</h2>
        <div class="date-range">
            <button id="daily-btn" class="period-btn active" data-period="daily">日</button>
            <button id="weekly-btn" class="period-btn" data-period="weekly">周</button>
            <button id="monthly-btn" class="period-btn" data-period="monthly">月</button>
            <button id="yearly-btn" class="period-btn" data-period="yearly">年</button>
            <div class="date-selector">
                <button id="prev-period" class="date-nav-btn">&lt;</button>
                <span id="current-period">今日</span>
                <button id="next-period" class="date-nav-btn">&gt;</button>
            </div>
        </div>
    </div>
    
    <div class="stats-overview">
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stats-card-content">
                <div class="stats-card-title">专注时间</div>
                <div class="stats-card-value" id="total-focus-time">0 分钟</div>
            </div>
        </div>
        
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stats-card-content">
                <div class="stats-card-title">专注次数</div>
                <div class="stats-card-value" id="total-focus-count">0</div>
            </div>
        </div>
        
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="fas fa-tasks"></i>
            </div>
            <div class="stats-card-content">
                <div class="stats-card-title">完成目标</div>
                <div class="stats-card-value" id="completed-goals">0</div>
            </div>
        </div>
        
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="stats-card-content">
                <div class="stats-card-title">专注效率</div>
                <div class="stats-card-value" id="focus-efficiency">0%</div>
            </div>
        </div>
    </div>
    
    <div class="charts-container">
        <div class="chart-card">
            <div class="chart-header">
                <h3>专注时间分布</h3>
                <div class="chart-legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: var(--primary-color);"></div>
                        <div class="legend-text">专注时间</div>
                    </div>
                </div>
            </div>
            <div class="chart-body">
                <canvas id="focus-time-chart"></canvas>
            </div>
        </div>
        
        <div class="chart-card">
            <div class="chart-header">
                <h3>目标完成情况</h3>
                <div class="chart-legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: var(--success-color);"></div>
                        <div class="legend-text">已完成</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: var(--primary-light);"></div>
                        <div class="legend-text">进行中</div>
                    </div>
                </div>
            </div>
            <div class="chart-body">
                <canvas id="goals-completion-chart"></canvas>
            </div>
        </div>
    </div>
    
    <div class="chart-card">
        <div class="chart-header">
            <h3>每日最佳专注时段</h3>
        </div>
        <div class="chart-body">
            <canvas id="focus-heatmap-chart"></canvas>
        </div>
    </div>
    
    <div class="insights-container">
        <h3>专注洞察</h3>
        <div class="insights-cards" id="insights-list">
            <!-- 洞察卡片将通过JS动态生成 -->
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="{{ url_for('static', filename='js/statistics.js') }}"></script>
{% endblock %} 